<!-- 模块说明 -->
<template>
  <div id="top">
    <div class="main">
      <router-view></router-view>
    </div>
    <div class="foot">
      <van-tabbar v-model="active" active-color="#000">
        <van-tabbar-item
          class="footerWrapper"
          v-for="(item, i) in list"
          :name="item.name"
          :icon="item.meta?.icon"
          :to="item.path"
          >{{ item.meta?.title }}</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
const active = ref<any>(0);
const router = useRouter();
const route = useRoute();
const list = computed(() => {
  return router.options.routes.filter((item) => !item.meta?.hidden);
});
// const routeList=router.options.routes
// console.log(list, "list")
// console.log(routeList,"routeList")
</script>
<style lang="scss">
#top {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  
  .main {
    flex: 1;
  }
  .foot {
    display: flex;
    justify-content: space-evenly;
    background-color: red;
    .footerWrapper {
        font-size: 0.22rem;
    }
    .van-tabbar-item{
        font-size: 0.22rem;
    }
  }
}
</style>
